<template>
  <div class="login-container">
    <div class="loginForm">
      <header class="header">
        <h2 class="title">Vue System 后台管理系统</h2>
        <ul class="type">
          <li :style="{color: (loginType === 1 ? '#6b9492':'')}">
            <a href="javascript:;" @click="loginType = 1">密码登录</a>
          </li>
          <li :style="{color: (loginType === 2 ? '#6b9492':'')}">
            <a href="javascript:;" @click="loginType = 2">手机号登录</a>
          </li>
        </ul>
      </header>
      <!-- 密码登录 -->
      <el-row>
        <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form">
          <el-col :span="24" v-if="loginType === 1">
            <el-form-item prop="username">
              <el-input
                prefix-icon="el-icon-user-solid"
                v-model="loginForm.username"
                placeholder="请输入用户名"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="loginType === 1">
            <el-form-item prop="password">
              <el-input
                prefix-icon="el-icon-lock"
                v-model="loginForm.password"
                placeholder="请输入密码"
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="loginType === 2">
            <el-form-item prop="phone">
              <el-input
                prefix-icon="el-icon-user-solid"
                v-model="loginForm.phone"
                placeholder="请输入手机号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-col :span="16">
              <el-form-item prop="code">
                <el-input
                  prefix-icon="el-icon-lock"
                  v-model="loginForm.code"
                  placeholder="请输入验证码"
                  @keyup.enter.native="handleLogin"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div style="height:40px;margin-left:5px" @click="getCode">
                <el-image style="width:100%;height:100%" :src="url"></el-image>
              </div>
            </el-col>
          </el-col>
          <el-col :span="24" v-if="loginType === 1">
            <el-form-item style="margin-bottom: 0px;">
              <el-checkbox v-model="loginForm.reMemberMe" label="记住密码"></el-checkbox>
              <!-- <a href="javascript:;" style="color:#ec3486; margin-left: 125px;">
                <span>忘记密码？</span>
              </a>-->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item style="margin-left: 62px;">
              <el-button type="primary" @click="submit" size="small">登录</el-button>
              <el-button size="small" @click="reset">取消</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <footer class="third">
        <span>第三方登录</span>
        <div>
          <i class="third-icon iconfont icon-qq" @click="thirdLogin('qq')"></i>
          <i class="third-icon iconfont icon-weixin" @click="thirdLogin('wx')"></i>
          <i class="third-icon iconfont icon-gitee" @click="thirdLogin('gitee')"></i>
          <i class="third-icon iconfont icon-github" @click="thirdLogin('github')"></i>
        </div>
      </footer>
    </div>
  </div>
</template>

<script>
import { getVerfyCode } from "@/api/login";
export default {
  name: "login",
  data() {
    return {
      loginType: 1,
      loading: false,
      url: "",
      loginForm: {
        username: "linjiang",
        password: "123456",
        phone: "",
        code: "",
        reMemberMe: false
      },
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            require: true,
            min: 6,
            max: 10,
            message: "密码长度在 6 到 10 个字符",
            trigger: "blur"
          },
          {
            require: true,
            trigger: "blur",
            validator: (rule, value, callback) => {
              const regx = /[\w@]{6,10}/;
              if (value) {
                if (!regx.test(value)) {
                  callback(new Error("用户密码不符合规格"));
                }
              }
              callback();
            }
          }
        ],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }]
      }
    };
  },
  computed: {},
  created() {
    this.getCode();
  },
  methods: {
    async getCode() {
      const { data } = await getVerfyCode();
      this.url = data;
    },
    submit() {
      this.$refs["loginForm"].validate(isOk => {
        if (isOk) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              this.$router.push({ path: "/" });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    reset() {
      this.$refs["loginForm"].resetFields();
    },
    // 第三方登录
    thirdLogin(type) {
      console.log("第三方登录", type);
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  &-container {
    position: relative;
    min-height: 100%;
    width: 100%;
    overflow: hidden;
    background: url(~@/assets/login/login.jpg) no-repeat;
    background-size: cover;

    .loginForm {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 350px;
      background-color: rgba(255, 255, 255, 0.7);
      translate: -50% -70%;
    }

    .header {
      .title {
        color: #6b9492;
        text-align: center;
      }

      .type {
        display: flex;
        width: 80%;
        font-size: 14px;
        justify-content: center;

        li {
          text-align: center;
          font-weight: 800;
        }

        li:first-child {
          padding-right: 10px;
        }
      }
    }

    .login-form {
      width: 80%;
      margin: 0 auto;
    }

    .third {
      color: #606266;
      display: flex;
      line-height: 28px;
      width: 80%;
      margin: 10px auto;
      div {
        margin-left: 5px;
        i {
          margin-left: 5px;
        }
      }
      &-icon {
        color: #1bc1fa;
        font-size: 25px;
        &:hover {
          cursor: pointer;
        }
      }
    }
  }
}
</style>